<template>
  <div  class="flex" style="padding-left: 10px;">
    <form  class="form-horizontal">
    <ul class="nav nav-tabs" >
      <li role="presentation" class="active" ><a href="#">查询用气明细</a></li>
    </ul>
    <validator name='v'>
    <div class="row auto"  style="margin-top:10px;" >
      <label for="f_meternumber"   class="col-sm-2 control-label">表号:</label>
      <div class="col-sm-2" style="margin-right:50px;" >
        <input class="form-control"  type="text" v-model="metermessage.meterno"  disabled="true">
      </div>

     <label for="startdate"  class=" col-sm-1">开始日期:</label>
    <div class="col-sm-2" style="margin-right:30px;">
       <datepicker id="startdate"
       placeholder="开始日期"
       v-model="metermessage.startdate"
       :value.sync="metermessage.startdate"
        :disabled-days-of-Week="[]"
       :format="'yyyy-MM-dd'"
       width="100%">
     </div>
     <label for="enddate"  class=" col-sm-1 ">结束日期:</label>
     <div class="col-sm-2" style="margin-right:30px;">
       <datepicker id="enddate"
       placeholder="结束日期"
       v-model="metermessage.enddate"
       :value.sync="metermessage.enddate"
        :disabled-days-of-Week="[]"
       :format="'yyyy-MM-dd'"
       width="100%">
    </div>
   </div>
</validator>
  </form>
    <div style="text-align:right;height:auto;margin-top:80px;margin-right:50px;">
      <button class="btn btn-success " @click="confirm()" style="width:80px;margin-left:20px;" >确&nbsp;&nbsp;&nbsp;定</button>
       <button class="btn btn-default" @click="cancel()" style="width:80px;margin-left:20px;">取&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;消</button>
    </div>
  </div>
</template>

<script>
export default {
  title: '查询用气明细',
  data () {
    return {
      metermessage: {
        meterno: '',
        querytype: 1,
        startdate: '',
        enddate: ''
      }
    }
  },
  watch: {
    'row' (val) {
      this.metermessage.meterno = val.f_meternumber
    }
  },
  props: ['row'],
  methods: {
    confirm () {
      this.metermessage = Object.assign(this.metermessage, this.row)
      this.$WebMeterService.queryGasDetail(this.metermessage)
      .then(
        (res) => {
          this.$dispatch('success', '查询用气明细', this.data, res)
        }
      ).catch(
        (error) => {
          this.$dispatch('error', '查询用气明细', this.data, error)
        }
      )
    },
    cancel () {
      this.$info('取消操作')
      this.$dispatch('clean', '查询用气明细')
    }
  }
}
</script>
